<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>美食区播放</title>
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
		<script>
			function _go(situation){
				let vid = $("span[name=2]").attr("id");
				let uid = $("span[name=1]").attr("id");
				location = "/"+situation+"/"+vid+"/"+uid;
			}
			function _go1(){
				let text = $("#text").val();
				let vid = $("span[name=2]").attr("id");
				let uid = $("span[name=1]").attr("id");
				location = "/insertBarragev/"+vid+"/"+uid+"/"+text;
			}
		</script>

		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1,sharing-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
			.pho{
				width: 120px;
				height: 75px;
				border: #000000 1px solid;
				border-radius: 3%;
			}
		</style>
	</head>
	<body>
		<!--导航栏开始-->
		<!--导航栏开始-->
		<iframe th:src="@{/navigation/navigationBar.html}"
				frameBorder="0" width="100%" scrolling="no" height="70px"></iframe>
		<!--导航栏结束-->
		<!--播放+关注up开始-->
		<section class="mt-4">
			<div class="container">
				<div class="float-left d-inline-block col-8">
					<h4>🍤 [[${video.vname}]]</h4>
					<hr />
					<div class="card text-white">
					  <img th:src="@{/img/bocar.gif}" class="card-img" height="450px" alt="...">

					</div>

					<hr />
					<span th:id="${session.uid}" th:name="1"/>
					<span th:id="${video.vid}" th:name="2"/>
					<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('cancelZanv')|" th:if="${isZan=='true'}">取消点赞[[${video.zan}]]</button>
					<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('updateZanv')|" th:unless="${isZan=='true'}">点赞[[${video.zan}]]</button>
					<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('cancelCang')|" th:if="${isCang=='true'}">取消收藏[[${video.cang}]]</button>
					<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('updateCang')|" th:unless="${isCang=='true'}">收藏[[${video.cang}]]</button>
					<button type="button" class="btn btn-outline-info" th:if="${isBi=='true'}">已投币[[${video.bi}]]</button>
					<button type="button" class="btn btn-outline-info" th:onclick="|javascript:_go('updateBiv')|" th:unless="${isBi=='true'}">投币[[${video.bi}]]</button>
					<button type="button" class="btn btn-outline-info">播放量[[${video.totalamount}]]</button>
					<hr />

					<div class="card ml-1 mt-2 border-0">
						<p class="card-text" th:text="${video.description}">
						</p>
					</div>
					<hr >

					<!--发表评论开始-->
					<div class="card mb-3 border-0">
						<div class="row no-gutters">
							<div class="col-md-3">
								<img th:src="@{/img/logo.png}" class="card-img " alt="...">
							</div>
							<div class="col-md-9">
								<div class="card-body">
									<form>
										<div class="row">
											<textarea class="form-control d-inline-block" placeholder="发表一条友善的评论吧" th:id="text"></textarea>
											<button type="button" class="btn btn-primary mt-4" th:onclick="|javascript:_go1()|">发表评论</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
					<hr />
					<!--发表评论结束-->

					<!--查看评论开始-->
					<img th:src="@{/img/comment.jpg}" th:if="${allBarrage.isEmpty()}" th:width="620px"/>
					<span th:each="barrageItem,itemStat:${allBarrage}">
							<span th:if="${itemStat.count<4}">
								<div class="card mb-3 border-0">
								  <div class="row no-gutters">
									<div class="col-md-3">
									  <img th:src="@{/img/logo.png}" class="card-img" alt="...">
									</div>
									<div class="col-md-9">
									  <div class="card-body">
										  <div class="card-title text-warning">
											  [[${barrageItem.nickname}]]
										  </div>
										  <div class="card-text">
											<p>[[${barrageItem.barrage}]]</p>
											<p class="card-text"><small th:text="${barrageItem.date}" class="text-muted"></small></p>
										  </div>
									  </div>
									</div>
								  </div>
								</div>
								<hr />
							</span>
						</span>
					<hr />
					<!--查看评论结束-->

				</div>
				<!--评论区结束-->

				<div class="float-left d-inline-block col-4">
					<div class="media mt-4">
					  <img th:src="@{/img/70_70.jpg}" class="mr-3" alt="...">
					  <div class="media-body">
						  <a th:href="@{/findUserById/}+${up.uid}"><h5 class="mt-0" th:text="${up.nickname}"></h5></a>
						<br />
						<a href="#" class="btn btn-primary">为TA充电</a>
						 <span>
							<a class="btn btn-primary" th:if="${isFans==true}" th:href="@{/cancelFocusv/}+${up.uid}+@{/}+
							${session.uid}+@{/}+${video.vid}">取消关注</a>
							 <a class="btn btn-primary" th:unless="${isFans==true}" th:href="@{/focusUpv/}+${up.uid}+@{/}+
							${session.uid}+@{/}+${video.vid}">+ 关注</a>
							<a class="btn btn-primary mt-2 text-white">粉丝数[[${up.fans}]]</a>
						</span>
					  </div>
					</div>

					<hr >
					<div class="card mb-3">
					  <div class="row no-gutters">
					    <div class="col-md-6">
					      <img th:src="@{/img/I01.jpg}" class="card-img ml-3 mt-3" style="width:160px;height: 100px">
					    </div>
					    <div class="col-md-6">
					      <div class="card-body">
					        <h6 class="card-title">炎炎消防队</h6>
					        <p class="card-text"></p>
					        <p class="card-text"><small class="text-muted">全24话</small></p>
							<p class="card-text"><small class="text-muted">127.1万播放·0弹幕</small></p>
					      </div>
					    </div>
					  </div>
					</div>

					<div class="card mb-3">
					  <div class="row no-gutters">
					    <div class="col-md-6">
					      <img th:src="@{/img/I02.jpg}" class="card-img ml-3 mt-3" alt="..." style="width:160px;height: 100px">
					    </div>
					    <div class="col-md-6">
					      <div class="card-body">
					        <h5 class="card-title">炎炎消防队</h5>
					        <p class="card-text"></p>
					        <p class="card-text"><small class="text-muted">全24话</small></p>
							<p class="card-text"><small class="text-muted">127.1万播放·0弹幕</small></p>
					      </div>
					    </div>
					  </div>
					</div>

					<div class="card mb-3">
					  <div class="row no-gutters">
					    <div class="col-md-6">
					      <img th:src="@{/img/I03.jpg}" class="card-img ml-3 mt-3" alt="..." style="width:160px;height: 100px">
					    </div>
					    <div class="col-md-6">
					      <div class="card-body">
					        <h5 class="card-title">炎炎消防队</h5>
					        <p class="card-text"></p>
					        <p class="card-text"><small class="text-muted">全24话</small></p>
							<p class="card-text"><small class="text-muted">127.1万播放·0弹幕</small></p>
					      </div>
					    </div>
					  </div>
					</div>
				</div>
			</div>
		</section>
		<!--播放+关注up结束-->

	</body>
</html>
